<template>
  <div id="home">
    <!-- 导航头 -->
    <van-nav-bar class="home-nav" title="阿亮商城" />

    <scroll class="content" ref="scroll" :probe-type="3" :pull-up-load="true" @scroll="contentScroll" @upload="contentUpLoad">
      <!-- 轮播图 -->
      <home-swiper :banners="banners" />

      <!-- 推荐 -->
      <recommend-view :recommends="recommends" />

      <!-- 本周流行 -->
      <feature></feature>

      <!-- 标签栏 -->
      <tabcontrol :titles="['流行', '新款', '精选']" @tabClick="tabClick"></tabcontrol>

      <!-- 商品展示列表 -->
      <goods-list :goods="goodstype" />
    </scroll>

    <!-- 回到顶部 -->
    <back-top v-show="showTop" @click.native="topClick" />
  </div>
</template>

<script>
import Vue from "vue";
import { NavBar } from "vant";
import HomeSwiper from "./childComps/HomeSwiper";
import RecommendView from "./childComps/RecommendView";
import Feature from "./childComps/Feature";
import Tabcontrol from "./childComps/Tabcontrol";
import GoodsList from "content/goods/GoodsList";
import Scroll from "common/scroll/Scroll";
import BackTop from "content/backTop/BackTop";
import { getHomeMultidata, getHomeGoods } from "network/home";
Vue.use(NavBar);
export default {
  data() {
    return {
      banners: [],
      recommends: [],
      goods: {
        pop: { page: 0, list: [] },
        new: { page: 0, list: [] },
        sell: { page: 0, list: [] }
      },
      currentType: "pop",
      showTop: false
    };
  },
  computed: {
    goodstype() {
      return this.goods[this.currentType].list;
    }
  },
  created() {
    // 1.请求多个数据
    this.getHomeMultidata();

    this.getHomeGoods("pop");
    this.getHomeGoods("new");
    this.getHomeGoods("sell");
  },
  methods: {
    // 监听事件
    tabClick(name) {
      switch (name) {
        case 0:
          this.currentType = "pop";
          break;
        case 1:
          this.currentType = "new";
          break;
        case 2:
          this.currentType = "sell";
          break;
      }
    },
    topClick() {
      this.$refs.scroll.scrollTo(0, 0, 500);
    },
    contentScroll(position) {
      // position.y < -1000 ? (this.showTop = true) : (this.showTop = false);
      this.showTop = -position.y > 1000;
    },
    contentUpLoad(){
      this.getHomeGoods(this.currentType)
      // console.log("上拉加载");
    },

    // 网络请求相关
    getHomeMultidata() {
      getHomeMultidata().then(res => {
        this.banners = res.data.banner.list;
        this.recommends = res.data.recommend.list;
      });
    },
    getHomeGoods(type) {
      const page = this.goods[type].page + 1;
      getHomeGoods(type, page).then(res => {
        this.goods[type].list = this.goods[type].list.concat(res.data.list);
        this.goods[type].page++;

        // 允许继续加载更多
        this.$refs.scroll.finishPullUp()
      });
    }
  },
  components: {
    HomeSwiper,
    RecommendView,
    Feature,
    Tabcontrol,
    GoodsList,
    Scroll,
    BackTop
  }
};
</script>

<style lang="less" scoped>
#home {
  height: 100vh;
  // padding-bottom: 49px;
  .home-nav {
    background-color: var(--color-tint);
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    .van-nav-bar__title {
      color: #fff;
    }
  }
  .content {
    margin-top: 46px;
    height: calc(100% - 95px);
    overflow: hidden;
  }
  // .content {
  //   overflow: hidden;
  //   position: absolute;
  //   top: 46px;
  //   bottom: 49px;
  //   left: 0;
  //   right: 0;
  // }
}
</style>